import { List, Button, Row, Col,Popconfirm } from 'antd';
import { Link, useModel, useRequest } from '@umijs/max';
import { deleteUser } from '@/services/user';
import { Access, useAccess } from 'umi';
function UserList() {
  const { data, loading, error, refresh } = useModel('user.model');
  const access = useAccess();
  const { run } = useRequest(deleteUser, {
    manual: true,
    onSuccess: refresh
  });
  if (error) {
    return <div>error</div>
  }
  return (
    <List
      loading={loading}
      header={<div>用户列表</div>}
      footer={<div>共计{data.list.length}条数据</div>}
      bordered
      dataSource={data.list}
      renderItem={(user: API.User) => (
        <List.Item>
          <Row style={{ width: '100%' }}>
            <Col span={6}>
              <Link to={`/user/detail/${user.id}`} state={user}>{user.username}</Link>
            </Col>
            <Col span={18} style={{ textAlign: 'right' }}>
              <Button
                size='small'
                type='primary'
                loading={loading}
                disabled={!access.rootCan}
                onClick={() => run(user.id)}
                style={{ marginRight: '10px' }}
              >
                删除
              </Button>
              <Access
                accessible={access.adminCan}
                fallback={<span>你无权更新用户</span>}
              >
                <Popconfirm
                  title="Are you sure to delete this task?"
                  onConfirm={() => run(user.id)}
                  okText="Yes"
                  cancelText="No"
                >
                  <Button
                    size='small'
                    type='default'
                    loading={loading}
                    disabled={!access.adminCan}
                  >
                    更新
                  </Button>
                </Popconfirm>

              </Access>
            </Col>
          </Row>


        </List.Item>
      )}
    />
  )
}
export default UserList;